<template>
  <div class="bucket-container">
    <div class="my-left">
      <el-card class="box-card my-left-card">
        <div>
          <el-avatar
           :src="avatar ? avatar : imgUrl"
            :size="200"
          ></el-avatar>
          <h3>{{userName}}</h3>
        </div>
      </el-card>
      <el-card class="box-card my-btm-card"> </el-card>
    </div>
    <div class="my-right">
      <el-card class="box-card">
        <div style="width: auto; height: 400px" id="main"></div>
        <div id="o2" class="o2"></div
      ></el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
import { BarChart, PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
  PieChart
])

export default {
  name: 'echarts',
  data(){
    return{
      imgUrl: require('../../assets/headportrait.png'),
    }
  },
  mounted() {
    this.echartsInit()
    this.chartDom()
  },
    computed: {
    ...mapGetters(['userName', 'roles','avatar',])
  },
  methods: {
    echartsInit() {
      echarts.init(document.getElementById('main')).setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          width: '20%',
          height: '50%'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      })
    },
    chartDom() {
      var myChart = echarts.init(document.getElementById('o2'))
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          width: '20%',
          height: '50%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.bucket-main-container {
  display: flex;
  height: 100vh;
}
.my-left {
  padding: 30px;
  width: 30vw;
}
.my-right {
  padding: 30px;
  width: 100%;
}
.o2 {
  width: 200px;
  height: 200px;
}
.my-left-card {
  height: 60vh;
  text-align: center;
}
.my-btm-card{
  margin-top: 10%;
  height: 30vh;
}
</style>
